<template>
  <view class="bg-c6">
    <view class="balance">
      <text class="text1 c7">美元余额：</text>
      <text class="text2 c7 fs24">1000.00</text>
    </view>
    <view class="us">
      <image src="../../../static/images/home/us-icon.png"> </image>
      <text class="text">美元</text>
      <input type="text" placeholder="请输入金额">
    </view>
    <view class="ab">
      <image src="../../../static/images/home/ab-icon.png"> </image>
      <text class="text1">阿币</text>
      <text class="text2 c7">0.00</text>
    </view>
    <view class="explain">由于汇率实时变动，交易金额请以支付时为准</view>
    <view class="btn">确认</view>
  </view>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.balance {
  padding: 40upx 0 0 46upx;
}
.us {
  height: 82upx;
  background: #fff;
  margin-top: 6upx;
  display: flex;
  align-items: center;
  padding: 0 46upx;
  image {
    @include size(30upx, 30upx);
  }
  .text {
    padding-left: 30upx;
  }
  .text2 {
    padding-left: 80upx;
  }
  input {
    padding-left: 80upx;
  }
}
.ab {
  height: 82upx;
  margin-top: 6upx;
  display: flex;
  align-items: center;
  padding: 0 46upx;
  image {
    @include size(30upx, 30upx);
  }
  .text1 {
    padding-left: 30upx;
  }
  .text2 {
    padding-left: 80upx;
  }
  input {
    padding-left: 80upx;
  }
}
.explain {
  text-align: center;
  margin-top: 60upx;
  font-size: 24upx;
}
.btn {
  width: 650upx;
  margin: 10upx auto;
  background: #007bc3;
  height: 66upx;
  line-height: 66upx;
  color: #fff;
  text-align: center;
  border-radius: 4upx;
}
</style>